<template>
	<div class="pg-page">
		<!-- 被学生使用 -->
		<cube-form :model="enterprise" :options="options" @validate="onValidate" @submit="onSubmit" @reset="onReset">
			<!-- 姓名  -->			
			<cube-form-item :field="fields.studentName" />
			<!-- 学号 -->	
			<cube-form-item :field="fields.studentNumber" />
			
			<!-- 企业教师 -->
			<cube-form-item :field="fields.entTeacher" />
			<!-- 企业名称 -->
			<cube-form-item :field="fields.entName" />
			<!-- 工作地址 -->
			<cube-form-item :field="fields.entAddress" />
			<!-- 企业电话 -->
			<cube-form-item :field="fields.entTel" />
			<!-- 企业信用代码 -->
			<cube-form-item :field="fields.creditCode" />
			<!-- 所属行业 -->
			<cube-form-item :field="fields.industry" />
			<!-- 从事职业 -->
			<cube-form-item :field="fields.profession" />
			<!-- 企业所在地   省  市  区 -->
			<cube-form-item :field="fields.entAreaCode">
				<div class="flex-between" @click="showAddressAreaPicker">
					<div class="area-input">{{ addressAreaText }}</div>
					<div class="address-area-icon"><i class="cubeic-home"></i></div>
				</div>
			</cube-form-item>
			<!-- 企业规模 -->
			<cube-form-item :field="fields.entScale" />
			<!-- 专业密切度 密切 相近 无关 -->
			<cube-form-item :field="fields.correlation" class="correlation"><cube-checker v-model="enterprise.correlation" :options="optionsCorrelation" type="radio" /></cube-form-item>
			<!-- 企业简介 -->
			<cube-form-item :field="fields.intro" class="cube-form-none-border"></cube-form-item>
			
				<cube-textarea class="content" autoExpand
				v-model="enterprise.intro" 
				placeholder="请输入企业简介">
				</cube-textarea>

			<!-- 实习方式-->
			<cube-form-item :field="fields.practiceMode" />
			<!-- 实习目的 -->
			<cube-form-item :field="fields.practiceGoal" />
			
			<!-- 实习安排 -->
			<!-- <cube-form-item :field="fields.practiceArrange" class="cube-form-none-border"></cube-form-item> -->
			<div class="practice-arrange">实习安排：	</div>
			<!-- 开始时间   结束时间 -->
			<div class="flex-between ">
				<cube-form-item :field="fields.beginDate" class="cube-form-none-border">
					<div @click="showBeginDatePicker(0)">{{ enterprise.beginDate[0] || '- / - / - ' }}</div>
				</cube-form-item>
				<cube-form-item :field="fields.endDate">
					<div @click="showEndDatePicker(0)">{{ enterprise.endDate[0] || '- / - / - ' }}</div>
				</cube-form-item>
			</div>
			<!-- 实习内容 -->
			<cube-form-item class="cube-form-none-border">
				<cube-textarea class="content-shadow" v-model="enterprise.content[0]" placeholder="请输入实习内容"></cube-textarea>
			</cube-form-item>
			<!-- 开始时间2   结束时间2 -->
			<div class="flex-between ">
				<cube-form-item :field="fields.beginDate" class="cube-form-none-border">
					<div @click="showBeginDatePicker(1)">{{ enterprise.beginDate[1] || '- / - / - ' }}</div>
				</cube-form-item>
				<cube-form-item :field="fields.endDate">
					<div @click="showEndDatePicker(1)">{{ enterprise.endDate[1] || '- / - / - ' }}</div>
				</cube-form-item>
			</div>
			<!-- 实习内容2 -->
			<cube-form-item class="cube-form-none-border">
				<cube-textarea class="content-shadow" v-model="enterprise.content[1]" placeholder="请输入实习内容"></cube-textarea>
			</cube-form-item>
			<div class="tips flex-right">
				带*为必填选项
			</div>			
			<cube-form-item :field="fields.submit"/>			
		</cube-form>
		
		<!-- 弹窗 -->
		<dialog-confirm 
			:visible="visiblePopup" 
			btnText="返回" 
			content="提交已更改" 
			:onConfirm="handleConfirm">
		</dialog-confirm>	
		
	</div>
</template>

<script>
// let cardReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
// let creditReg = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
// let cardCreditReg = /^[0-9A-Z]{2}\d{6}[0-9A-Z]{10}$/;
// let emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
// let addressReg = /[^\s]/;
// let phoneReg = /^1(3|4|5|7|8)\d{9}$/;
// let securityReg = /^\d{6}$/;
let chineseReg = /^[\u4e00-\u9fa5]+$/;
let studentNumberReg = /^\d{10}$/; //学生学号

import { provinceList, cityList, areaList } from '@/utils/area.js';
const addressData = provinceList;
addressData.forEach(province => {
	province.children = cityList[province.value];
	province.children.forEach(city => {
		city.children = areaList[city.value];
	});
});
const industryList = ['居民服务和其他企业', '科学研究/技术服务和地址勘测业', '信息传输/计算机服务和软件业', '水利/环境和公共设施管理业', '其他'];
const entScaleList = ["200人以上","51-200人","1-50人"];
import DialogConfirm from '@/components/DialogConfirm.vue';

export default {
	name: 'EnterpriseEdit',
	components: {
		DialogConfirm
	},
	data() {
		return {
			optionsCorrelation: [
				{
					value: '密切',
					text: '密切'
				},
				{
					value: '相近',
					text: '相近'
				},
				{
					value: '无关',
					text: '无关'
				}
			],
			
			enterprise: {
				studentName: '李思思', //姓名
				studentNumber: '2018080133', //学号
				entTeacher: '张三', //企业教师
				entName: '甬港现代工程有限公司', //企业名称
				entAddress: '浙江省宁波市镇海区中观西路203号', //工作地址
				entTel: '0574-83676523', //企业电话
				creditCode: '91330211573687903j', //企业信用代码
				industry: '信息传输/计算机服务和软件业', //所属行业
				profession: '工程师', //从事职业
				entAreaCode: '', //企业所在地   省  市  区
				entScale: '51-200人', // 企业规模
				correlation: '密切', // 专业密切度  密切 相近 无关
				intro: '宁波创艺信息科技有限公司于2011年06月01日在宁波市工商行政管理局镇海分局登记成立。法定代表人宁可，公司经营范围包括计算机软硬件、通讯设备及技术的研发、维护等。.', // 企业简介
				practiceMode: '顶岗', // 实习方式
				practiceGoal: '适应工作', // 实习目的
				// 实习安排
				beginDate: ['2023/4/1', '2023/5/1'], // 开始时间   结束时间
				endDate: ['2023/4/30', '2023/5/31'], //实习内容
				content: ['各指导教师召集、布置实习任务', '各指导教师召集、布置实习任务']
			},

			fields: {
				studentName: {
					type: 'input',
					modelKey: 'studentName',
					label: '姓名：',
					props: {
						placeholder: '请输入姓名'
					},
					rules: {
						required: true,
						pattern: chineseReg
					},
					messages: {
						pattern: '姓名为中文字符'
					},
					trigger: 'blur'
				},

				studentNumber: {
					type: 'input',
					modelKey: 'studentNumber',
					label: '学号：',
					props: {
						placeholder: '请输入学号'
					},
					rules: {
						required: true,
						pattern: studentNumberReg
					},
					messages: {
						pattern: '学号为10位数字'
					},
					trigger: 'blur'
				},

				entTeacher: {
					type: 'input',
					modelKey: 'entTeacher',
					label: '企业教师：',
					props: {
						placeholder: '请输入企业教师'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entName: {
					type: 'input',
					modelKey: 'entName',
					label: '企业名称：',
					props: {
						placeholder: '请输入企业名称'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entAddress: {
					type: 'input',
					modelKey: 'entAddress',
					label: '工作地址：',
					props: {
						placeholder: '请输入工作地址'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entTel: {
					type: 'input',
					modelKey: 'entTel',
					label: '企业电话：',
					props: {
						placeholder: '请输入企业电话'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				creditCode: {
					type: 'input',
					modelKey: 'creditCode',
					label: '企业信用代码：',
					props: {
						placeholder: '请输入企业信用代码'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				industry: {
					type: 'select',
					modelKey: 'industry',
					label: '所属行业：',
					props: {
						options: industryList,
					},
					rules: {
						required: true
					}
				},

				profession: {
					type: 'input',
					modelKey: 'profession',
					label: '从事职业：',
					props: {
						placeholder: '请输入从事职业'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				entAreaCode: {
					modelKey: 'entAreaCode',
					label: '企业所在地：',
					rules: {
						required: true
					},
					messages: {
						required: '请选择'
					}
				},

				entScale: {
					type: 'select',
					modelKey: 'entScale',
					label: '企业规模：',
					props: {
						options: entScaleList,
					},
					rules: {
						required: true
					},
				},

				correlation: {
					modelKey: 'correlation',
					label: '专业密切度：',
					rules: {
						required: true
					}
				},

				intro: {
					modelKey: 'intro',
					label: '企业简介：',
					props: {
						placeholder: '请输入企业简介'
					},
					rules: {
						required: true
					},
					// debounce validate
					// if set to true, the default debounce time will be 200(ms)
					debounce: 100
				},

				practiceMode: {
					type: 'input',
					modelKey: 'practiceMode',
					label: '实习方式：',
					props: {
						placeholder: '请输入实习方式'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				practiceGoal: {
					type: 'input',
					modelKey: 'practiceGoal',
					label: '实习目的：',
					props: {
						placeholder: '请输入实习目的'
					},
					rules: {
						required: true
					},
					trigger: 'blur'
				},

				practiceArrange: {
					label: '实习安排：',
					// rules: {
					// 	required: true
					// }
				},

				beginDate: {
					label: '开始：'
				},

				endDate: {
					label: '结束：'
				},

				submit: {
					type: 'submit',
					label: '登记',
					props: {
						primary: true
					},
				},
				reset: {
					type: 'reset',
					label: '重置',
					props: {
						primary: true
					},
				},
				
			},

			options: {
				scrollToInvalidField: true,
				layout: 'standard' //classic standard fresh,
			},

			addressAreaText: '省 / 市 / 区',
			addressSelectedIndex: [],			

			curDateIndex: 0,
			visiblePopup: false, //提交确认弹窗显示
		};
	},
	methods: {
		//点击提交按钮
		onSubmit(e) {
			e.preventDefault();
			console.log('submit', e);
			if(e.isTrusted == false) return;
			
			this.visiblePopup = true
		},
		onValidate(result) {
			this.validity = result.validity;
			this.valid = result.valid;
			console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex);
		},
		onReset(e) {
			console.log('reset', e);
		},

		showAddressAreaPicker() {
			if (!this.addressAreaPicker) {
				this.addressAreaPicker = this.$createCascadePicker({
					title: '请选择地址',
					data: addressData,
					// selectedIndex: this.addressSelectedIndex, //设置初始默认地址选择
					onSelect: (selectedVal, selectedIndex, selectedText) => {
						this.addressAreaText = selectedText.join('/');
						this.addressSelectedIndex = selectedIndex;						
						this.enterprise.entAreaCode = selectedVal;					
					}
				});
			}
			this.addressAreaPicker.show();
		},

		showBeginDatePicker(i) {
			this.curDateIndex = i;
			if (!this.dateBgnPicker) {
				this.dateBgnPicker = this.$createDatePicker({
					title: '选择开始日期',
					min: new Date(2020, 7, 8),
					max: new Date(2030, 9, 20),
					value: new Date(),
					onSelect: this.bgnDatePickerSelectHandle,
					onChange: (val1, val2) => {
						console.log('dateBgnPicker change', val1, val2);
					}
				});
			}
			this.dateBgnPicker.show();
		},

		bgnDatePickerSelectHandle(date, selectedVal, selectedText) {	
			console.log(`Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`)
			this.enterprise.beginDate.splice(this.curDateIndex, 1, selectedVal.join('/'))
		},

		showEndDatePicker(i) {
			this.curDateIndex = i;
			if (!this.dateEndPicker) {
				this.dateEndPicker = this.$createDatePicker({
					title: '选择结束日期',
					min: new Date(2020, 7, 8),
					max: new Date(2030, 9, 20),
					value: new Date(),
					onSelect: this.endDatePickerSelectHandle,
					onChange: (val1, val2) => {
						console.log('dateEndPicker change', val1, val2);
					}
				});
			}
			this.dateEndPicker.show();
		},

		endDatePickerSelectHandle(date, selectedVal, selectedText) {
			this.enterprise.endDate.splice(this.curDateIndex, 1, selectedVal.join('/'));
		},
		
		//处理弹框确认按钮回调
		handleConfirm(){
			this.visiblePopup=false;
			this.$router.push({name:"enterpriseList"})
		},
		
	}
};
</script>

<style lang="less" scoped>
.pg-page{
	margin: 30px 20px;	
}
	
/deep/.cube-form-label{
		width: unset;
		font-size: 14px;		
		font-weight: 500;
		color: #333333;
		line-height: 12px;		
		
}
.area-input, .pg-page /deep/.cube-input-field{
	font-size: 14px;	
	font-weight: 500;
	color: #B0B0B0;
	line-height: 12px;
}

/deep/.cube-select-icon{
	border-color: #FFB651 transparent transparent transparent;
	border-width: 8px 8px 0px 8px;
}
.correlation{	
	/deep/.cube-checker-item{
		padding: 2px 8px;
		margin: 0 4px;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(248, 173, 92, 0.64);
		border-radius: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #FFB651;
	}
	/deep/.cube-checker-item_active{
		background: #FE921E;
		box-shadow: 0px 0px 4px 0px rgba(248, 173, 92, 0.64);
		border-radius: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #FFFFFF;
	}
}
.cube-form-none-border::after{
	border: none;
}
.content{
	margin: 0 20px;	
	padding: 10px !important;
	/deep/.cube-textarea{
			color: #B0B0B0;
	}
	
}
.address-area-icon{
	margin-right: 8px;
	color: #FFB651;
	font-size: 18px;
}
.content-shadow{
	padding: 10px;
	background: #FFFFFF;
	box-shadow: 0px 0px 9px 1px rgba(255, 203, 130, 0.3);
	border-radius: 5px;
	/deep/ .cube-textarea {
		color: #B0B0B0;
		font-weight: 500;
		font-size: 12px;
		line-height: 12px;
	}
}
.practice-arrange{
	padding: 0px 14px;
	min-height: 46px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: 46px;
	&::before{
		content: "*";
		margin-top: 1px;
		margin-right: 0.3em;
		color: #e64340;
	}
}

.tips{
	margin-top: 20px;
	margin-right: 20px;
	font-size: 10px;	
	font-weight: normal;
	color: #666666;
	line-height: 12px;
	text-align: right;
}		
/deep/.cube-btn-primary{
	margin: 0 auto;	
	letter-spacing:5px;
	width: 183px;	
	background: #FE921E;
	box-shadow: 0px 5px 12px 0px rgba(254,146,30,0.59);
	border-radius: 20px;
	
	font-size: 18px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
}	
</style>
